<template>
  <div class="container">
    <el-card class="item" :class="{ active1: !isLogin }">
      <h2>登录</h2>
      <el-form class="login-form" :model="formData" :rules="loginRules" ref="loginFormRef">
        <el-form-item prop="username">
          <el-input v-model="formData.username" :clearable="true" placeholder="请输入用户名">
            <template #prefix>
              <el-icon>
                <SolarUserBroken />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="formData.password" type="password" :clearable="true" :showPassword="true"
            placeholder="请输入密码">
            <template #prefix>
              <el-icon>
                <mdi-password-outline />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="captcha" v-if="isLogin">
          <captcha :autoRefresh="true" v-model="formData.captcha" @refresh="refreshCaptcha" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">登录</el-button>
        </el-form-item>
        <div class="tips">
          <div>没有账号？</div>
          <a @click="isLogin = !isLogin">😊去注册一个吧~</a>
        </div>
      </el-form>
    </el-card>
    <el-card class="item" :class="{ active: isLogin }">
      <h2>注册</h2>
      <el-form class="login-form" :model="formData" :rules="registerRules" ref="registerFormRef">
        <el-form-item prop="username">
          <el-input v-model="formData.username" :clearable="true" placeholder="请输入用户名">
            <template #prefix>
              <el-icon>
                <solar-user-broken />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="formData.password" :clearable="true" type="password" :showPassword="true"
            placeholder="请输入密码">
            <template #prefix>
              <el-icon>
                <mdi-password-outline />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="email">
          <el-input v-model="formData.email" :clearable="true" type="email" placeholder="请输入邮箱">
            <template #prefix>
              <el-icon>
                <IcOutlineEmail />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="captcha" v-if="!isLogin">
          <captcha :autoRefresh="true" v-model="formData.captcha" @refresh="refreshCaptcha" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleRegister">注册</el-button>
        </el-form-item>
        <div class="tips">
          <div>已有账号？<a @click="isLogin = !isLogin">去登录</a></div>
        </div>
      </el-form>
    </el-card>
    <div class="bj-squares">
      <div class="square" v-for="i in 15" :key="i"></div>
    </div>
  </div>
</template>

<script setup>
import { useUserStore } from '@/stores/user'
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import SolarUserBroken from '~icons/solar/user-broken';
import MdiPasswordOutline from '~icons/mdi/password-outline';
import IcOutlineEmail from '~icons/ic/outline-email';
import { register } from '@/service/module/user';

const userStore = useUserStore()
const isLogin = ref(true)
const loginFormRef = ref(null)
const registerFormRef = ref(null)

const formData = reactive({
  username: '',
  password: '',
  email: '',
  captcha: '',
  captchaKey: ''
})

// 表单验证规则
const loginRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度在3-20个字符之间', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在6-20个字符之间', trigger: 'blur' }
  ],
  captcha: [
    { required: true, message: '请完成验证', trigger: 'blur' }
  ]
}

const registerRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度在3-20个字符之间', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在6-20个字符之间', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  captcha: [
    { required: true, message: '请完成验证', trigger: 'blur' }
  ]
}

const handleSubmit = () => {
  loginFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        await userStore.handleLogin({ ...formData })
      } catch (error) {
        ElMessage.error(error.message || '登录失败')
      }
    }
  })
}

const handleRegister = async() => {
  registerFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        await register({ ...formData })
        ElMessage.success('注册成功')
        isLogin.value = !isLogin.value
      } catch (error) {
        ElMessage.error(error.message || '注册失败')
      }
    }
  })
}

const refreshCaptcha = (key) =>{ // 刷新验证码
  formData.captchaKey = key
  console.log(key)
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  max-width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  perspective: 1000px;
  // background: #e1eec3;
  //   /* fallback for old browsers */
  // background: -webkit-linear-gradient(to right, #f05053, #e1eec3);
  //   /* Chrome 10-25, Safari 5.1-6 */
  // background: linear-gradient(to right, #f05053, #e1eec3);

  background: rgb(195, 34, 137);
  background: linear-gradient(0deg, rgba(195, 34, 137, 1) 0%, rgba(187, 39, 174, 1) 43%, rgba(118, 45, 253, 1) 100%);

  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  .item {
    width: 450px;
    min-height: 380px;
    position: absolute;
    transition: all 1s ease;
    transform-style: preserve-3d;
    z-index: 1;
    backface-visibility: hidden;
    border-radius: 15px;
 
    h2 {
      font-weight: 700;
      font-size: 30px;
    }

    &:hover {
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
    }
  }

  .active {
    transform: rotateY(180deg);
    z-index: 0;
  }

  .active1 {
    transform: rotateY(-180deg);
    z-index: 0;
  }

  .login-form {
    padding: 40px 60px;

    .el-button {
      width: 100%;
      height: 40px;
      background: linear-gradient(135deg, #f02a97, #6366f1, #a855f7);
      color: white;
      font-weight: bold;
      transition: all 0.3s ease;
      box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3);
      transition: all 0.3s ease;
      letter-spacing: 20px;
      &:hover {
        background: linear-gradient(135deg, #a855f7, #6366f1, #f02a97);
        box-shadow: 0 4px 10px rgba(99, 102, 241, 0.5);
        transform: translateY(-1px);
      }
    }
  }

  .tips {
    margin-top: 1rem;
    line-height: 2;
    text-align: center;

    a {
      color: #e61352;
      font-weight: bold;
      cursor: pointer;

      &:hover {
        color: #6366f1;
        text-decoration: underline;
      }
    }
  }
}
.bj-squares {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .square {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: rgba($color: #fff, $alpha: 1.0);
    bottom: -100px;
    left: 50%;
    animation: square-animation 2s infinite linear;
    &:nth-child(n) {
      @for $i from 1 through 15 {
        &:nth-child(#{$i}) {
          left: random(100) * 1%; // 水平方向随机分布
          $size: random(50) + 10px;
          // border-radius: random(100) + '%/' + random(100) + '%'; // 随机形状
          border-radius: random(20) + px;
          width: $size;
          height: $size;
          opacity: random(10) / 15; // 透明度随机 
          animation-delay: random(5) + s; // 动画延迟 1s - 5s
          animation-duration: random(5) + 1s; // 动画持续时间 2s - 7s
        }
      }
    }
    @keyframes square-animation {
      0% {
        transform: translateY(0px);
      }
      100% {
        transform: translateY(-100vh) rotate(360deg);
      }
    }
  }
}
</style>